<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优化节点添加</title>
</head>
<body>
  <script>
    for (var i = 0; i < 10; i++) {
      var oP = document.createElement('p')
      oP.innerHTML = i
      document.body.append(oP)
    }

  // DocumentFragments 是DOM节点。它们不是主DOM树的一部分。
  // 通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。
  // 在DOM树中，文档片段被其所有的子元素所代替。
  // 因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。
  // 因此，使用文档片段通常会带来更好的性能。

    const fragEle = document.createDocumentFragment()
    for (var i = 0; i < 10; i++) {
      var oP = document.createElement('p')
      oP.innerHTML = i
      fragEle.append(oP)
    }
    document.body.append(fragEle)
  </script>
</body>
</html>
